<template>
    <div class="scroll-wrap" ref="wrapper">
        <div class="scroll-content">
            <slot></slot>
            <div>
                <slot name="loading"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
    name:'bscroll',
    props:{
        scrollY:{
            type:Boolean,
            default:false
        },
        scrollX:{
            type:Boolean,
            default:false
        },
        pullUpLoad:{  //是否上拉加载
            type:[Boolean,Object],
            default:false
        }
    },
    mounted(){
        this.$nextTick(() => {
            this.myScroll = new BScroll(this.$refs.wrapper, {
                scrollY: this.scrollY,
                scrollX:this.scrollX,
                pullUpLoad:this.pullUpLoad,
                probeType:2,
                click:true
            })

            // 触发上拉加载的事件， 调用getInfo 请求数据
            this.myScroll.on('pullingUp', () => {
                //请求数据
                this.$emit('getShopList');
                this.$nextTick(() => {
                    this.myScroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
                });
                this.myScroll.finishPullUp(); 
            })

        })
    }
}
</script>

<style scoped lang="scss">
    .scroll-wrap{
        @include size(100%,100%);
        overflow: hidden;
    }
</style>

